---
import BaseLayout from "../../layouts/BaseLayout.astro";

// 标签数据
const tags = [
  {
    name: "React",
    count: 12,
    description: "Modern JavaScript library for building user interfaces",
    color: "#61DAFB",
  },
  {
    name: "Vue.js",
    count: 8,
    description: "Progressive JavaScript framework for building UIs",
    color: "#4FC08D",
  },
  {
    name: "Astro",
    count: 6,
    description: "Modern static site generator for faster websites",
    color: "#FF5D01",
  },
  {
    name: "TypeScript",
    count: 15,
    description: "Typed superset of JavaScript for better development",
    color: "#3178C6",
  },
  {
    name: "UI/UX",
    count: 10,
    description: "User interface and user experience design",
    color: "#FF6B6B",
  },
  {
    name: "Mobile",
    count: 7,
    description: "Mobile application development and design",
    color: "#4ECDC4",
  },
  {
    name: "Design",
    count: 14,
    description: "Visual and interaction design projects",
    color: "#45B7D1",
  },
  {
    name: "Full-stack",
    count: 9,
    description: "End-to-end web application development",
    color: "#96CEB4",
  },
  {
    name: "E-commerce",
    count: 5,
    description: "Online shopping and payment solutions",
    color: "#FFEAA7",
  },
  {
    name: "API",
    count: 11,
    description: "Application programming interface development",
    color: "#DDA0DD",
  },
  {
    name: "Database",
    count: 8,
    description: "Data storage and management solutions",
    color: "#98D8C8",
  },
  {
    name: "Cloud",
    count: 6,
    description: "Cloud computing and deployment services",
    color: "#F7DC6F",
  },
];

// 按使用次数排序
const sortedTags = tags.sort((a, b) => b.count - a.count);
---

<BaseLayout
  title="TAG | Tags & Technologies"
  description="Explore the technologies and skills I work with."
  pageClass="page-sub page-tag"
>
  <div id="main">
    <section id="head" class="section1_1">
      <h1>TAGS</h1>
      <p class="lead">Technologies and skills I work with</p>
    </section>
    
    <section class="tags-content">
      <div class="section_wrap">
        <div class="tags-container">
          <div class="tags-intro">
            <h2>My Technology Stack</h2>
            <p>
              Here's an overview of the technologies, frameworks, and tools I use 
              in my projects. Each tag represents a skill or technology I'm 
              proficient in, with the number indicating how many projects I've 
              used it in.
            </p>
          </div>
          
          <div class="tags-grid">
            {sortedTags.map((tag) => (
              <div class="tag-card" style={`--tag-color: ${tag.color}`}>
                <div class="tag-header">
                  <h3 class="tag-name">{tag.name}</h3>
                  <span class="tag-count">{tag.count}</span>
                </div>
                <p class="tag-description">{tag.description}</p>
                <div class="tag-bar">
                  <div 
                    class="tag-progress" 
                    style={`width: ${(tag.count / Math.max(...tags.map(t => t.count))) * 100}%`}
                  ></div>
                </div>
              </div>
            ))}
          </div>
          
          <div class="tags-stats">
            <h3>Statistics</h3>
            <div class="stats-grid">
              <div class="stat-item">
                <div class="stat-number">{tags.length}</div>
                <div class="stat-label">Technologies</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">{tags.reduce((sum, tag) => sum + tag.count, 0)}</div>
                <div class="stat-label">Total Projects</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">{Math.max(...tags.map(t => t.count))}</div>
                <div class="stat-label">Most Used</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">{Math.round(tags.reduce((sum, tag) => sum + tag.count, 0) / tags.length)}</div>
                <div class="stat-label">Avg per Tech</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</BaseLayout>

<style>
.tags-content {
  padding: 60px 0;
}

.tags-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.tags-intro {
  text-align: center;
  margin-bottom: 60px;
}

.tags-intro h2 {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
}

.tags-intro p {
  font-size: 16px;
  line-height: 1.7;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 80px;
}

.tag-card {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-top: 4px solid var(--tag-color);
}

.tag-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.tag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.tag-name {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.tag-count {
  background: var(--tag-color);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.tag-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.tag-bar {
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}

.tag-progress {
  height: 100%;
  background: var(--tag-color);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.tags-stats {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
}

.tags-stats h3 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 30px;
  color: #333;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 36px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .tags-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .tag-card {
    padding: 20px;
  }
  
  .tag-name {
    font-size: 20px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .stat-number {
    font-size: 28px;
  }
  
  .tags-stats {
    padding: 30px 20px;
  }
}
</style>
